<template>
	<div class="add"><el-button type="primary" @click="add">添加</el-button></div>
	<el-dialog
			    v-model="dialogVisible_add"
			    title="Tips"
			    width="500"
			  >
			    <el-input type="text" v-model="gNum" placeholder="请输入添加的商品数量"></el-input>
			   
				<el-select
				      v-model="goodsValue"
				      placeholder="请选择商品"
				      size="large"
				      style="width: 240px"
					  @change="goodsChange"
				    >
				      <el-option
				        v-for="item in goodsoptions"
				        :key="item.id"
				        :label="item.name"
				        :value="item.id"
				      />
				    </el-select>
					<el-select
					      v-model="skuValue"
					      placeholder="请选择商品sku"
					      size="large"
					      style="width: 240px"
					    >
					      <el-option
					        v-for="item in skuoptions"
					        :key="item.id"
					        :label="item.name"
					        :value="item.id"
					      />
					    </el-select>
						<el-select
						      v-model="userValue"
						      placeholder="请选择用户"
						      size="large"
						      style="width: 240px"
							  @change="userChange"
						    >
						      <el-option
						        v-for="item in useroptions"
						        :key="item.id"
						        :label="item.name"
						        :value="item.id"
						      />
						    </el-select>
						<el-select
						      v-model="addValue"
						      placeholder="请选择收货人地址"
						      size="large"
						      style="width: 240px"
						    >
						      <el-option
						        v-for="item in addoptions"
						        :key="item.id"
						        :label="item.name"
						        :value="item.id"
						      />
						    </el-select>
							<el-select
							      v-model="stateValue"
							      placeholder="请选择订单状态"
							      size="large"
							      style="width: 240px"
							    >
							      <el-option
							        v-for="item in stateoptions"
							        :key="item.name"
							        :label="item.name"
							        :value="item.name"
							      />
							    </el-select>
			    <template #footer>
			      <div class="dialog-footer">
			        <el-button @click="dialogVisible_add = false">Cancel</el-button>
			        <el-button type="primary" @click="addSubmit">
			          Confirm
			        </el-button>
			      </div>
			    </template>
		</el-dialog>
	<el-dialog
		    v-model="dialogVisible_update"
		    title="Tips"
		    width="500"
		  >
		    <el-select
		          v-model="stateValue"
		          placeholder="请选择订单状态"
		          size="large"
		          style="width: 240px"
		        >
		          <el-option
		            v-for="item in stateoptions"
		            :key="item.name"
		            :label="item.name"
		            :value="item.name"
		          />
		        </el-select>
	
		    <template #footer>
		      <div class="dialog-footer">
		        <el-button @click="dialogVisible_update = false">Cancel</el-button>
		        <el-button type="primary" @click="updateSubmit">
		          Confirm
		        </el-button>
		      </div>
		    </template>
		  </el-dialog>
		  <el-dialog
		    v-model="dialogVisible_del"
		    title="Tips"
		    width="500"
		  >
		    确认要删除 {{delName}} 吗？
		    <template #footer>
		      <div class="dialog-footer">
		        <el-button @click="dialogVisible_del = false">Cancel</el-button>
		        <el-button type="primary" @click="delSubmit">
		          Confirm
		        </el-button>
		      </div>
		    </template>
		  </el-dialog>
	<el-table :data="tableData" style="width: 1200px;">
	  <el-table-column prop="state" label="订单状态" width="180" />
	  <el-table-column label="订单商品">
		  <template #default="scope">
			  <div>
				<div v-for="item in scope.row.info" :key="item[0].sid">
					{{item[0].gname}}-{{item[0].sname}} 价格：{{item[0].sprice}}
				</div>
			</div>
		  </template>
	  </el-table-column>
	  <el-table-column label="收货地址">
		  <template #default="scope">
			  {{scope.row.addr[0].consignee}}-
			  <text style="color:red;">{{scope.row.addr[0].mobile}}</text>-
			  {{scope.row.addr[0].province_name}}{{scope.row.addr[0].city_name}}{{scope.row.addr[0].area_name}}
			  {{scope.row.addr[0].addr_detail}}
		  </template>
	  </el-table-column>
	  <el-table-column prop="u[0].name" label="用户"></el-table-column>
	  <el-table-column prop="createTime" label="创建时间" />
	  <el-table-column prop="updateTime" label="更新时间" />
			<el-table-column>
				<template #header>操作</template>
				<template #default="scope">
				  <el-button type="warning" @click="update(scope.row.id,scope.row.state)">编辑状态</el-button>
				  <el-button type="danger" @click="del(scope.row.id,scope.row.name)">删除</el-button>
				</template>
			</el-table-column>
	</el-table>
</template>

<script setup>
	import {ref} from 'vue'
	const tableData = ref([])
	import {http} from "../components/http.js"
	function query(){
		http({url:"/queryOrderInfo",method:"get"}).then(res=>{
			tableData.value = res.data.data
		})
	}
	query()
	const dialogVisible_add = ref(false)
	const dialogVisible_update = ref(false)
	const dialogVisible_del = ref(false)
	const updateId = ref(undefined)
	const delId = ref(undefined)
	const gNum = ref(1)
	const goodsValue = ref(undefined)
	const goodsoptions = ref([])
	const skuValue = ref(undefined)
	const skuoptions = ref([])
	const userValue = ref(undefined)
	const useroptions = ref([])
	const addValue = ref(undefined)
	const addoptions = ref([])
	const stateValue = ref(undefined)
	const stateoptions = ref([{name:"待付款"},{name:"待核实"},{name:"待发货"},{name:"待收货"},{name:"待评价"},{name:"已完成"}])
	function add(){
		dialogVisible_add.value = true
		http({url:"/readGoods",method:"get"}).then(res=>{
			goodsoptions.value = res.data.data
		})
		http({url:"/queryYddUser",method:"get"}).then(res=>{
			useroptions.value = res.data.data
		})
	}
	function goodsChange(){
		console.log("goodschange")
		http({url:"/findSkuByGoodsId?goodsId="+goodsValue.value,method:"get"}).then(res=>{
			skuoptions.value = res.data.data
		})
	}
	function userChange(){
		http({url:"/findAddByUserId?id="+userValue.value,method:"get"}).then(res=>{
			addoptions.value = res.data.data
			addoptions.value.forEach((item,i)=>{
				addoptions.value[i].name = item.consignee+"-"+item.mobile+"-"+item.province_name+item.city_name+item.area_name
			})
		})
	}
	function addSubmit(){
		http({url:"/addOrder",method:"post",data:{goodsNum:gNum.value,userId:userValue.value,goods_id:goodsValue.value,goods_sku_id:skuValue.value,addr_id:addValue.value,state:stateValue.value}}).then(res=>{
			dialogVisible_add.value = false
			query()
		})
	}
	const delName = ref("")
	function del(id,name){
		dialogVisible_del.value = true
		delId.value = id
		delName.value = name
	}
	function delSubmit(){
		http({url:"/delOrder?id="+delId.value,method:"get"}).then(res=>{
			dialogVisible_del.value = false
			query()
		})
	}
	const updateName = ref("")
	function update(id,state){
		dialogVisible_update.value = true
		updateId.value = id
		stateValue.value = state
		// updateName.value = name
	}
	function updateSubmit(){
		http({url:'/updateStateById?id='+updateId.value+'&state='+stateValue.value,method:"get"}).then(res=>{
			dialogVisible_update.value = false
			query()
		})
	}
</script>

<style>
</style>